<template>
  <view class="container">
	<xk-header :headerbg="true" class="header" :back="true" title="电梯"></xk-header>
	<view class="top-localtion">
		<u-row >
			<u-col span="8">
				所在楼栋
			</u-col>
			<u-col span="4">
				<u-button @click="showPk = true" size="small">{{xuanname}} <u-icon name="arrow-down" color="#2979ff" size="14" customStyle="margin-left:5px;"></u-icon></u-button>
			</u-col>
		</u-row>
		<u-picker :show="showPk" :columns="columns" @confirm="confirmPk" @cancel="showPk =false"></u-picker>
	</view>

	<u-grid :col="2">
	<block v-for="(item, index) in elevtorList" :key="index">
	<u-grid-item>
	<view class="box0">
		<view class="title1">{{item.install_site}}</view>
		<view class="box1">
			<view class="title2">
				<view class="icons"><u-icon :name="item.ztx" color="#2979ff" size="18"></u-icon></view> <view>{{item.zt}}</view>
			</view>
			<view :class="'title3 color'+item.sid">{{item.status}}</view>
			<view class="title4">当前楼层：{{item.floor}}楼</view>
			<!-- <view class="title5">实时载重：{{item.zaizhong}}</view> -->
		</view>
	</view>
	</u-grid-item>
	</block>
	</u-grid>
	<view class="loadtext">
		<u-loadmore
			:line="true"
			loadingIcon="spinner"
			:status="status"
			:loading-text="loadingText"
			:loadmore-text="loadmoreText"
			:nomore-text="nomoreText"
		/>
	</view>
   <u-toast ref="uToast" />
  </view>
</template>

<script>
  /* import { setCartTabBadge } from '@/core/app'
  import * as Api from '@/api/page'
  import Page from '@/components/page' */

  const App = getApp()

  export default {
    components: {},
    data() {
      return {
        // 页面参数
        options: {},
        // 页面属性
        page: {},
        // 页面元素
        items: [],
		xuanvalue:0,
		xuanname:'主楼',
		showPk:false,
		columns: [
			['主楼', '副楼']
		],
		elevtorList :[],
		diantiList:[
			{name:'电梯A-KT01',zt:'上行',ztx:'arrow-right-double',sid:0,status:'空闲',louceng:'23',zaizhong:'0%'},
			{name:'电梯A-KT02',zt:'下行',ztx:'arrow-left-double',sid:1,status:'运行',louceng:'23',zaizhong:'30%'},
			{name:'电梯A-KT03',zt:'下行',ztx:'arrow-left-double',sid:2,status:'已关门',louceng:'23',zaizhong:'50%'},
			{name:'电梯A-KT04',zt:'上行',ztx:'arrow-right-double',sid:3,status:'维护',louceng:'23',zaizhong:'0%'},
			{name:'电梯A-KT05',zt:'下行',ztx:'arrow-left-double',sid:2,status:'已关门',louceng:'23',zaizhong:'50%'},
			{name:'电梯A-KT06',zt:'上行',ztx:'arrow-right-double',sid:3,status:'维护',louceng:'23',zaizhong:'0%'},
		],
		demoList0:[
			{name:'电梯A-KT01',zt:'上行',ztx:'arrow-right-double',sid:0,status:'空闲',louceng:'23',zaizhong:'0%'},
			{name:'电梯A-KT02',zt:'下行',ztx:'arrow-left-double',sid:1,status:'运行',louceng:'23',zaizhong:'30%'},
			{name:'电梯A-KT03',zt:'下行',ztx:'arrow-left-double',sid:2,status:'已关门',louceng:'23',zaizhong:'50%'},
			{name:'电梯A-KT04',zt:'上行',ztx:'arrow-right-double',sid:3,status:'维护',louceng:'23',zaizhong:'0%'},
			{name:'电梯A-KT05',zt:'下行',ztx:'arrow-left-double',sid:2,status:'已关门',louceng:'23',zaizhong:'50%'},
			{name:'电梯A-KT06',zt:'上行',ztx:'arrow-right-double',sid:3,status:'维护',louceng:'23',zaizhong:'0%'},
		],
		demoList1:[
			{name:'电梯A-KT01',zt:'上行',ztx:'arrow-right-double',sid:3,status:'维护',louceng:'21',zaizhong:'10%'},
			{name:'电梯A-KT02',zt:'上行',ztx:'arrow-right-double',sid:2,status:'已关门',louceng:'12',zaizhong:'50%'},
			{name:'电梯A-KT03',zt:'上行',ztx:'arrow-right-double',sid:1,status:'运行',louceng:'10',zaizhong:'30%'},
			{name:'电梯A-KT04',zt:'下行',ztx:'arrow-left-double',sid:0,status:'空闲',louceng:'23',zaizhong:'0%'},
		],
		status: 'loading',
		loadingText: '数据装载中',
		loadmoreText: '轻轻上拉加载',
		nomoreText: '没有更多的信息'
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
	this.getPageData('01');
    },
	// mounted() {
	// 	// 加载页面数据
	// 	this.getPageData('01');
	// },
	
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
    },

    methods: {
	  getPageData(siteCode){
		  // console.log(1111)
		 this.$api.tenementApi(`ob/eds/list?siteCode=${siteCode}`,'Get').then((res)=>{
			 // console.log(res.data)
			 this.elevtorList = res.data
		 })
	  },
	  confirmPk(e){
		console.log('confirm', e)
		var that=this;
		this.xuanname=e.value[0]
		var indexs=e.indexs[0]
		 this.showPk=false;
		 this.$refs.uToast.show({
			type: 'loading',
			title: '正在加载',
			message: "正在加载",
			duration:1000,
			complete(){
				if(indexs==0){
					that.getPageData('01')
					that.status='loading';
				}else{
					that.getPageData('02')
					that.status='nomore';
				}
			}
		 });
	  },
      // /**
      //  * 加载页面数据
      //  * @param {Object} callback
      //  */
      // getPageData(callback) {
        // const app = this
        // const pageId = app.options.pageId || 0
        // Api.detail(pageId)
        //   .then(result => {
        //     // 设置页面数据
        //     const { data: { pageData } } = result
        //     app.page = pageData.page
        //     app.items = pageData.items
        //     // 设置顶部导航栏栏
        //     app.setPageBar();
        //   })
        //   .finally(() => callback && callback())
      // },

      /**
       * 设置顶部导航栏
       */
      setPageBar() {
        const {
          page
        } = this
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: page.params.title
        });
        // 设置navbar标题、颜色
        uni.setNavigationBarColor({
          frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
          backgroundColor: page.style.titleBackgroundColor
        })
      },

    },

    /**
     * 下拉刷新
     */
    onPullDownRefresh() {
      // 获取首页数据
      this.getPageData(() => {
        uni.stopPullDownRefresh()
      })
    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
   page{
		background:#F5F5F5!important;
		box-shadow:none!important;
	}
	uni-page{
		box-shadow:none!important;
	}
  .container {
    background: #F5F5F5;
  }
  .top-localtion{
	  margin:30rpx 30rpx 0 30rpx;
	  background:#FFFFFF;
	  padding:20rpx 30rpx 20rpx 30rpx;
	  border-radius:12rpx;
	  box-shadow: 4px 4px 8px 0px rgba(240, 239, 244, 100);
	  .dwtext{
		  margin-left:10rpx;
		  color: #101010;
		  font-size:28rpx;
	  }
  }
  .box1{
	 background:#FFFFFF;
	 text-align:center;
	 padding:30rpx 0 30rpx 0;
	 font-size:32rpx;
	 border-radius:20rpx;
	 box-shadow: 4px 4px 8px 0px rgba(240, 239, 244, 100);
	 border:1px solid #f1f1f1;
  }
  .box5{
  	 background:#FFFFFF;
  	 text-align:center;
	 display: flex;
	 padding:40rpx 0 40rpx 40rpx;
	 font-size:32rpx;
	 border-radius:20rpx;
	 vertical-align: middle;
	 line-height:120rpx;
	 box-shadow: 4px 4px 8px 0px rgba(240, 239, 244, 100);
	 .tcctext{
		 margin-left:20rpx;
	 }
  }
  .iconbox{
	  width:120rpx;
	  height:120rpx;
  }
  .box0{
	  margin:20rpx 10rpx 20rpx 10rpx;
	  width:84%;
  }

  .title1{
	  text-align:center;
	  padding:10px;
	  font-weight:bold;
  }
  .title2{
	  text-align:center;
	  display:inline-flex;
  }
  .title3{
	  font-size:60rpx;
	  padding:50rpx 0 50rpx 0;
  }
  .title4{
  	  font-size:24rpx;
	  color:#999;
  }
  .title5{
  	  font-size:24rpx;
	  color:#999;
  }
  .color0{
	  color:#80C088;
  }
  .color1{
  	  color:#101010;
  }
  .color2{
  	  color:#101010;
  }
  .color3{
  	  color:#E0CE31;
  }
  .icons{
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
  }
  .loadtext{
	  clear: both;
	  padding:20rpx;
  }
</style>
